<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 小菊问诊系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.0/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.0/dist/layui.js"></script>
    <style>
        .layui-layout-admin .layui-header {
            background-color: rgb(46 125 50 / 90%);
        }
        .layui-layout-admin .layui-side {
            background-color: #393D49;
        }
        .layui-layout-admin .layui-nav-itemed > a {
            background-color: rgb(46 125 50 / 90%) !important;
        }
        .layui-card {
            margin-bottom: 20px;
        }
        .layui-card-header {
            padding: 15px 20px;
            background-color: #f8f8f8;
            border-bottom: 1px solid #eaeaea;
        }
        .layui-card-body {
            padding: 20px;
        }
        .search-form {
            margin-bottom: 20px;
        }
        .search-form .layui-form-item {
            margin-bottom: 15px;
        }
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        .status-normal {
            background-color: #52c41a;
            color: white;
        }
        .status-admin {
            background-color: #1890ff;
            color: white;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <div class="layui-logo">小菊问诊系统</div>
            <div class="layui-layout-right">
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="layui-nav-img">
                            <span id="admin-username">管理员</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" id="logout">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="/admin/">仪表盘</a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;">用户管理</a>
                        <dl class="layui-nav-child">
                            <dd class="layui-this"><a href="/admin/users">用户列表</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">AI 管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/admin/suppliers">供应商管理</a></dd>
                            <dd><a href="/admin/roles">角色管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">问诊记录</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/admin/consultations">问诊列表</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="layui-body">
            <div style="padding: 15px;">
                <div class="layui-card">
                    <div class="layui-card-header">用户管理</div>
                    <div class="layui-card-body">
                        <!-- 搜索表单 -->
                        <form class="layui-form search-form" lay-filter="searchForm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">
                                        <i class="layui-icon">&#xe615;</i> 搜索
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                        
                        <!-- 数据表格 -->
                        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
                        
                        <!-- 操作栏模板 -->
                        <script type="text/html" id="userBar">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                        </script>
                        
                        <!-- 用户类型模板 -->
                        <script type="text/html" id="userTypeTpl">
                            {{# if(d.is_admin){ }}
                            <span class="status-badge status-admin">管理员</span>
                            {{# } else { }}
                            <span class="status-badge status-normal">普通用户</span>
                            {{# } }}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 用户编辑弹窗 -->
    <div id="userEditModal" style="display: none;">
        <form class="layui-form" lay-filter="userEditForm">
            <input type="hidden" name="user_id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户类型</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_admin" lay-skin="switch" lay-text="管理员|普通用户">
                </div>
            </div>
        </form>
    </div>
    
    <script>
        layui.use(['jquery', 'layer', 'table', 'form'], function() {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            
            // 退出登录
            $('#logout').click(function() {
                layer.confirm('确定要退出登录吗？', function(index) {
                    $.ajax({
                        url: '/auth/logout',
                        type: 'POST',
                        success: function(res) {
                            if (res.code === 200) {
                                layer.msg('退出成功', {time: 1000}, function() {
                                    window.location.href = '/auth/login';
                                });
                            } else {
                                layer.msg(res.message || '退出失败');
                            }
                        },
                        error: function() {
                            layer.msg('网络错误');
                        }
                    });
                    layer.close(index);
                });
            });
            
            // 获取用户名
            $.ajax({
                url: '/api/user/info',
                type: 'GET',
                success: function(res) {
                    if (res.code === 200) {
                        $('#admin-username').text(res.data.username || '管理员');
                    }
                }
            });
            
            // 表格渲染
            var userTable = table.render({
                elem: '#userTable',
                url: '/admin/api/users',
                method: 'GET',
                page: true,
                limit: 10,
                limits: [10, 20, 50],
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', width: 120},
                    {field: 'username', title: '用户名', width: 120},
                    {field: 'email', title: '邮箱', minWidth: 150},
                    {field: 'phone', title: '手机号', width: 120},
                    {field: 'is_admin', title: '用户类型', width: 100, templet: '#userTypeTpl'},
                    {field: 'consultation_count', title: '问诊次数', width: 100},
                    {field: 'created_at', title: '注册时间', minWidth: 160},
                    {fixed: 'right', title: '操作', toolbar: '#userBar', width: 120}
                ]],
                response: {
                    statusName: 'code',
                    statusCode: 200,
                    msgName: 'message',
                    countName: 'data.total',
                    dataName: 'data.items'
                }
            });
            
            // 搜索
            form.on('submit(search)', function(data) {
                userTable.reload({
                    where: {
                        username: data.field.username,
                        email: data.field.email
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
            
            // 监听表格工具事件
            table.on('tool(userTable)', function(obj) {
                var data = obj.data;
                
                // 编辑用户
                if (obj.event === 'edit') {
                    // 填充表单
                    form.val('userEditForm', {
                        'user_id': data.id,
                        'username': data.username,
                        'email': data.email,
                        'phone': data.phone || '',
                        'is_admin': data.is_admin ? 'on' : ''
                    });
                    
                    // 打开编辑弹窗
                    layer.open({
                        type: 1,
                        title: '编辑用户',
                        content: $('#userEditModal'),
                        area: ['500px', 'auto'],
                        btn: ['确定', '取消'],
                        success: function() {
                            // 重新渲染表单
                            form.render();
                        },
                        yes: function(index) {
                            // 验证表单
                            form.validate();
                            
                            // 获取表单数据
                            var formData = form.val('userEditForm');
                            
                            // 提交修改
                            $.ajax({
                                url: '/admin/api/users/' + formData.user_id,
                                type: 'PUT',
                                data: {
                                    username: formData.username,
                                    email: formData.email,
                                    phone: formData.phone,
                                    is_admin: formData.is_admin === 'on'
                                },
                                success: function(res) {
                                    if (res.code === 200) {
                                        layer.msg('更新成功', {time: 1000}, function() {
                                            layer.close(index);
                                            userTable.reload();
                                        });
                                    } else {
                                        layer.msg(res.message || '更新失败');
                                    }
                                },
                                error: function() {
                                    layer.msg('网络错误');
                                }
                            });
                        },
                        end: function() {
                            // 清空表单
                            form.val('userEditForm', {
                                'user_id': '',
                                'username': '',
                                'email': '',
                                'phone': '',
                                'is_admin': ''
                            });
                        }
                    });
                }
                
                // 删除用户
                else if (obj.event === 'delete') {
                    layer.confirm('确定要删除该用户吗？删除后将无法恢复！', function(index) {
                        $.ajax({
                            url: '/admin/api/users/' + data.id,
                            type: 'DELETE',
                            success: function(res) {
                                if (res.code === 200) {
                                    obj.del();
                                    layer.msg('删除成功');
                                } else {
                                    layer.msg(res.message || '删除失败');
                                }
                            },
                            error: function() {
                                layer.msg('网络错误');
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html>